<template>
	<view>
		<view class="coupon-wrapper">
			<image src="/static/share-article/dhjl.png" mode=""></image>
			<text class="title">一周配餐 兑换券</text>
			<text class="info">包含六天周期性饮食服务配餐</text>
		</view>
		<view class="btn-wrapper" @click="shareArticle">
			<text>立即分享</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id: 0
			};
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData: function() {
				this.$api.getInfo({
						type: 3
					})
					.then(res => {
						console.log(res);
					})
				this.$api.getUserId()
					.then(res => {
						this.user_id = res.data;
					})
			},
			shareArticle: function() {
				var url = '';
				url = 'http://qsh5.douyinhot.com/#/pages/article-page/article-page'
				this.$db._ShowToast(this.user_id + ''); 
				url += '?user_id=' + this.user_id;
				const input = document.createElement("input");
				input.readOnly = 'readonly';
				input.value = url;
				document.body.appendChild(input);
				input.select();
				input.setSelectionRange(0, input.value.length);
				document.execCommand('Copy');
				document.body.removeChild(input);
				this.$db._ShowToast('复制链接成功');
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
		overflow: hidden;
	}

	.coupon-wrapper {
		margin: 162rpx auto 66rpx;
		width: 522rpx;
		display: flex;
		flex-flow: column;
		align-items: center;
		background: #FAFAFA;
		border-radius: 24rpx;
		box-shadow: 0 0 14rpx rgba(0, 0, 0, 0.07);

		image {
			width: 522rpx;
			height: 522rpx;
		}

		.title {
			padding: 84rpx 0 32rpx;
			color: #0A0A0A;
			font-size: 30rpx;
		}

		.info {
			padding-bottom: 108rpx;
			color: #AFAFAF;
			font-size: 22rpx;
		}
	}

	.btn-wrapper {
		margin: 0 auto;
		width: 488rpx;
		border-radius: 26rpx;
		text-align: center;
		background: #D5B24E;
		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 90rpx;
	}
</style>
